﻿<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>BugzX</title>
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.14.custom.min.js"></script>
    <link type="text/css" rel="Stylesheet" href="Site.css" />
    <link type="text/css" rel="Stylesheet" href="jquery-ui-1.8.14.custom.css" />

    <script type="text/javascript">

        $(document).ready(function () {

            $("header a").hover(
                function () { $(this).addClass("ui-state-hover"); },
                function () { $(this).removeClass("ui-state-hover"); }
            );

            $(".projects li").hover(
                function () { $(this).addClass("ui-state-hover"); },
                function () { $(this).removeClass("ui-state-hover"); }
            );

            $(".projects li").click(function () {

                var project = $(this).data("project");

                window.location = "/projects/" + project;
            });

            $("#formLogin").dialog({
                autoOpen: false,
                height: 300,
                width: 350,
                modal: true,
                buttons: {
                    "Login": function () {
                        var valid = true;

                        $("#textUserName").removeClass("ui-state-error");
                        $("#textPassword").removeClass("ui-state-error");

                        var username = $("#textUserName").val();
                        var password = $("#textPassword").val();

                        if (username.length <= 0) {

                            $("#textUserName").addClass("ui-state-error");
                            valid = false;
                        }

                        if (password.length <= 0) {

                            $("#textPassword").addClass("ui-state-error");
                            valid = false;
                        }

                        if (valid) {

                            $(this).dialog("close");

                            window.location = "/login/?username=" + username + "&password=" + password;
                        }
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                },
                close: function () {
                    $("#textUserName").removeClass("ui-state-error");
                    $("#textUserPassword").removeClass("ui-state-error");
                }
            });

            $("#buttonLogin")
                .button()
                .click(function () {

                    $("#formLogin").dialog("open");
                });

            $("#buttonNewProject")
                .button()
                .click(function () {

                    window.location = "/project/new/";
                });

            $("#buttonLogout")
                .button()
                .click(function () {

                    window.location = "/login/logout/";
                });
        });

    </script>
</head>
<body>
    <section class="page">
        <header class="pageHeader">
            <nav>
                <button id="buttonLogout" class="login">Log Out</button>
                <button id="buttonLogin" class="login">Log In</button>
                <button id="buttonNewProject" class="login">New Project</button>
            </nav>
        </header>
        <section class="body">
            <nav>
                <ul class="projects ui-widget ui-helper-clearfix">
                    <li class="ui-state-default ui-corner-all" data-project="DotNetX"><p>DotNetX</p><img src="images/projectlogos/DotNetX.png" alt="DotNetX" /></li>
                    <li class="ui-state-default ui-corner-all" data-project="BugzX"><p>BugzX</p><img src="images/projectlogos/BugzX.png" alt="BugzX" /></li>
                    <li class="ui-state-default ui-corner-all" data-project="RPGX"><p>RPGX</p><img src="images/projectlogos/RPGX.png" alt="RPGX" /></li>
                    <li class="ui-state-default ui-corner-all" data-project="WebServerX"><p>WebServerX</p><img src="images/projectlogos/WebServerX.png" alt="WebServerX" /></li>
                </ul>
            </nav>
        </section>
        <footer>
            <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.richardscomputer.co.uk%2FBugzX%2F" title="Valid HTML5" class="validHTML5">This website is valid HTML 5</a>
        </footer>
    </section>
    <div id="formLogin" title="Login">
        <form>
            <input type="text" id="textUserName" placeholder="Username" autofocus />
            <input type="password" id="textPassword" placeholder="Password" />
        </form>
    </div>
</body>
</html>
